Axios

在介紹要 Axios 如何使用時，一如往常的需要先了解「Axios」是什麼？
依照 Axios 官方網站 官方的說明，axios 是一個以 Promise 為基礎的HHTP 請求工具，可以在瀏覽器與 Node.js 中被應用，在伺服器端也可以使用 Node.js 的 http 模組，而在用戶端中使用主則可以使用 XMLHttpRequests。

且也具備以下的特性：

• 從瀏覽器中發送 XMLHttpRequests
• 從 node.js 中發送 http 請求
• 可支援 Promise API
• 可攔截請求與回應
• 可轉換請求與回應的數據
• 可取消請求
• 可自動轉換成 Json 格式
• 保護並預防客戶端受 XSRF 攻擊

Axios 使用時機

當我們需要透過 http 由瀏覽器發送請求或者是透過直接向 Node.js 發送請求時，都可以去使用我們的 axios 來處理，而除了 Vue 的套件外，其他的前端框架或語言都可以使用 axios 去取得資料，如：React、Node、JavaScript。

Axios 安裝

安裝部分有兩種方法，npm 與 CDN 直接安裝。
首先我們先介紹 npm 的方裝方式，開啟終端機並進去 Vue Cli 的資料夾中，輸入以下指令：

npm install axios

安裝完成後，會呈現下圖：

方法二：使用 CDN 匯入：

<script src="<https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js>"></script>

Axios 用法

最基本的用法就是使用 GET 與 POST 兩種方式去存取資料：

透過GET取得資料

變數 = axios.get('資料來源網址url')

透過POST傳送資料

axios.post('/user', {
    firstName: 'Fred',     
    lastName: 'Flintstone'}
)

Vue-Axios

首先，我們可以在 Vue Cli 的 public 資料夾下建立一個名為 data.json 的檔案

並在檔案中放我們想獲取的資料，例如：

"old_name": "PRL_1",
"new_name": "PRL_2",
"old_file": "TechPack_1",
"new_file": "TechPack_2",
"type_version": "123",
"relation_version": "456",
"table_version": "789",

接者，我們除了透過 http://localhost:3000/data.json 的方式取得檔案外，也可以直接使用 /data.json 去取得資料，以下我們透過變數 url 去指定此資料來源位置：
方法一：

const url = '/data.json'

方法二：

const url = 'http://localhost:3000/data.json'

設定 Vue

在 Vue 中，我們可以透過 Composition API 的方式去建構，因此需要在 setup 的函式中放入 axios.get() 來獲取資料：

const url = '/data.json' 
 
const iThome_example = {
   setup() {
      axios.get(url)
         .then((res)=>{
             console.log(res.data)
           })
          return {};
        },
      };

接者至 App.vue 中的 <script> 加上以下程式碼：

import axios from 'axios';
const url = '/data.json';

export default {
    setup() {
        axios.get(url).then((res)=>{
            console.log(res.data)
        })
    },
}

axios取資料的時間點

也由於以上的程式碼在網頁元素還沒有渲染完成前，就已取出資料，代表我們還有優化的空間，可以讓網頁元素在本地端渲染完成後，在進行下載。因此我們可以使用 Vue 生命週期的 onMounted hook，在 Vue 掛載完成後才進行取得資料：

const { onMounted } = Vue;
const url = '/data.json' 
const iThome_example = {
        setup() {
          onMounted(() => {
            axios.get(url)
              .then((res) => {
                console.log(res.data);
              });
          });
          return {};
        },
      };

而 App.vue 中 <script> 程式碼也需要做修改：

import {onMounted} from 'vue';
import axios from 'axios';
const url = '/data.json';
export default {
    setup() {
        onMounted(() => {
            axios.get(url)
              .then((res)=>{
                  console.log(res.data)
            })
         });
        return {};
    },
}

就像這樣，我們就能成功的使用 axios 去獲取資料了。

那我們今日對於 Vue-Axios 的介紹就到這裡結束拉
謝謝大家的觀看，我們明天見！